<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>矿粉数据分析</title>
    <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <style>
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        #statistics {
            margin: 20px 0;
            padding: 20px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
        #chart {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>矿粉数据分析</h1>
        <input type="file" id="fileInput" accept=".xlsx">
        <div id="statistics"></div>
        <div id="chart"></div>
    </div>

    <script>
        document.getElementById('fileInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const reader = new FileReader();

            reader.onload = function(e) {
                const data = new Uint8Array(e.target.result);
                const workbook = XLSX.read(data, {type: 'array'});
                const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
                const jsonData = XLSX.utils.sheet_to_json(firstSheet);

                // 处理数据
                const juneData = jsonData.filter(row => {
                    const date = new Date(row['创建时间']);
                    return date.getMonth() === 5; // JavaScript中月份从0开始
                });

                // 按日期分组
                const dailyTotal = {};
                juneData.forEach(row => {
                    const date = new Date(row['创建时间']).toISOString().split('T')[0];
                    dailyTotal[date] = (dailyTotal[date] || 0) + Number(row['净重'] || 0);
                });

                // 准备图表数据
                const dates = Object.keys(dailyTotal).sort();
                const weights = dates.map(date => dailyTotal[date]);

                // 绘制图表
                const trace = {
                    x: dates,
                    y: weights,
                    type: 'scatter',
                    mode: 'lines+markers',
                    name: '日净重'
                };

                const layout = {
                    title: '6月份每日矿粉总量统计',
                    xaxis: {
                        title: '日期',
                        tickangle: 45
                    },
                    yaxis: {
                        title: '净重（吨）'
                    }
                };

                Plotly.newPlot('chart', [trace], layout);

                // 显示统计信息
                const totalWeight = weights.reduce((a, b) => a + b, 0);
                const avgWeight = totalWeight / weights.length;
                const maxWeight = Math.max(...weights);
                const minWeight = Math.min(...weights);

                const statsHtml = `
                    <h2>统计结果</h2>
                    <p>6月份总运输量：${totalWeight.toFixed(2)}吨</p>
                    <p>日均运输量：${avgWeight.toFixed(2)}吨</p>
                    <p>最大单日运输量：${maxWeight.toFixed(2)}吨</p>
                    <p>最小单日运输量：${minWeight.toFixed(2)}吨</p>
                `;

                document.getElementById('statistics').innerHTML = statsHtml;
            };

            reader.readAsArrayBuffer(file);
        });
    </script>
</body>
</html>